<template>
	<view class="popup_box">
		<u--form labelPosition="top" :model="passwordModel" labelWidth="140" :rules="rules" ref="form">
			<view class="phone">
				请输入支付密码
			</view>
			<view class="pay_info">
				<view class="des">支付金额</view>
				<view class="pay_amount">￥ {{payAmount}}</view>
			</view>
			<u-form-item prop="payPwd">
				<u-code-input autocomplete="true" :dot="true" :focus="true" v-model="passwordModel.payPwd"
					:maxlength="6" @finish="handlerPayPwdFinish"></u-code-input>
			</u-form-item>
		</u--form>

		<view class="close">
			<u-icon name="close-circle-fill" size="30" color="#EB7C7C" @click="handlerClosePayPasswordClose">
			</u-icon>
		</view>


	</view>
</template>

<script>
	import {
		settingPayPwd,
		verifyOldPayPwd
	} from '@/config/api';
	export default {
		props: {
			walletPayShow: {
				type: Boolean,
			},
			payAmount: {
				type: [Number, String]
			}
		},

		data() {
			return {
				passwordModel: {
					payPwd: "",
				},
				rules: {

					'payPwd': [{
							required: true,
							message: '请输入6位支付秘密',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (this.passwordModel.oldPayPwd == value) {
									callback(new Error('新旧密码不能相同'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							},

							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.rangeLength(value, [6, 6]);
							},
							message: '支付密码需为6为',
							trigger: ['change', 'blur'],
						}
					],
				},
				loading: false,



			};
		},


		created() {

		},
		mounted() {

		},
		methods: {
			handlerClosePayPasswordClose() {
				this.$emit('update:walletPayShow', false);
				this.$emit("close");

			},

			handlerPayPwdFinish() {
				this.$emit("finish", this.passwordModel.payPwd);
			},
			clearPwd() {
				this.passwordModel.payPwd = "";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_box {
		width: 602rpx;
		padding: 40rpx;
		position: relative;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.phone {
			padding: 0 0 20rpx 0;
			font-size: 28rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.pay_info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.des {
				font-size: 14px;
			}

			.pay_amount {
				font-size: 18px;
				font-weight: bold;
				margin-top: 5px;
				margin-bottom: 10px;
			}
		}

	}
</style>
